Stores and State Sharing (1/15)
What are Svelte stores?

    In Svelte, a **store** is a reactive object that holds a value and allows different components to share and update state easily. Stores are especially useful for managing global or shared data without having to pass props down through many layers of components.

    Benefits of using Svelte stores:
    • Centralized state management for complex apps.
    • Avoids deeply nested prop drilling between components.
    • Built-in reactivity — components automatically update when the store changes.
    • Simple, lightweight alternative to libraries like Redux or Vuex.

    Svelte provides the `writable` store for values that can change over time. You can create one using the `writable` function from the `svelte/store` module.

    Creating a writable store (store.js)

    To use the store inside a Svelte component, import it and use the `$` prefix. This automatically subscribes the component to the store and updates the UI whenever the store's value changes.

    Example of using the store

    Svelte also provides two other store types: - **Readable Store**: For values that can be read but not directly modified by components (e.g., data from an API). - **Derived Store**: For creating new values based on other stores.

    Example of a derived store (doubleCount.js)
    Using a derived store in a component
    Important facts about Svelte stores:
    • Use the `$` prefix to auto-subscribe to stores in Svelte templates.
    • Writable stores allow both reading and updating data.
    • Readable stores are read-only, perfect for external data sources.
    • Derived stores let you compute values based on one or more stores.